<template>
  <view>
    <!-- 处方信息 -->
    <view class="section-card">
      <view class="prescription-header">
        <view class="title-container">
          <view class="section-title">检验检查</view>
        </view>
      </view>
      <view class="medicine-list">
        <view class="medicine-item" v-for="(item, index) in tests" :key="index">
          <view class="medicine-name">{{ item.name }}</view>
          <view class="medicine-meta">
            <text>申请单号：{{ item.no }}</text>
            <text>数量：{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  props: {
    tests: {
      type: Array,
      default: () => []
    },
  }
}
</script>

<style lang="scss" scoped>
.section-card {
  margin-bottom: 80rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 14rpx rgba(0, 0, 0, 0.08);
  background: linear-gradient(#F0FEFF 0%, #fff 100%);
}

.title-container {
  position: relative;
  margin-bottom: 18rpx;
}

.section-title {
  position: relative;
  font-size:34rpx;
  font-weight: bold;
  color: #333;
  z-index: 1;
}

.prescription-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prescription-no {
  position: absolute;
  color: #fff;
  border-radius: 8rpx;
  padding: 4rpx 0;
  font-size: 30rpx;
  z-index: 1;
}

.medicine-list {
  padding: 0rpx 6rpx;
}

.medicine-item {
  margin-bottom: 24rpx;
}

.medicine-name {
  font-size: 30rpx;
  color: #333;
}

.medicine-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
}
</style>